<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 20:57:54
 * @LastEditors: vectorwings
<<<<<<< HEAD
 * @LastEditTime: 2019-10-26 10:05:23
 * @Description:
=======
 * @LastEditTime: 2019-10-25 23:13:56
 * @Description:
>>>>>>> bdf0422d44b2076836b62363a7d6c54e480fc7ac
 -->
<template>
  <!--整改工作-->
  <div class="rectification">
    <header>
      <mt-header title="整改工作" style="background-color:#F9F9F9;color:#333333;">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </header>
    <section>
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section v-for="(i,index) in data" :key="index" style="margin-bottom:5px;">
              <mu-paper class="demo-paper" :z-depth="2">
                <section
                  class="box"
                  style="margin:0;padding:0.2rem;"
                  @click="rout(i.rectId,i.checkUserName)"
                >
                  <p class="line-list flex_b">
                    <custom-label bgColor="red" title="一般问题"></custom-label>
                    <custom-label bgColor="green" title="整改中"></custom-label>
                  </p>
                  <p class="line-list textdot">
                    <span class>项目名称：{{i.orgName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>检查部位：{{i.checkParts}}</span>
                  </p>
                  <p class="line-list">
                    <span>问题类型：{{i.problemTypeName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>问题描述：{{i.problemDescription}}</span>
                  </p>
                  <p class="line-list">
                    <span>检查时间：{{i.checkTime}}</span>
                  </p>
                  <p class="line-list flex_b">
                    <span>整改期限：{{i.endTime}}</span>
                  </p>
                  <div class="list-cell">
                    整改责任人：<avatar-name :name="i.responsibleUserName" avatarBgColor="orange"></avatar-name>
                    <span style="width: 0.08rem;"></span>
                    检查人：<avatar-name :name="i.checkUserName" avatarBgColor="orange"></avatar-name>
                    <span width="100%">
                      <!--<img src="../../../assets/img/default.png" />-->
                    </span>
                  </div>
                </section>
                <section style="padding:10px 0;">
                  <mu-flex justify-content="around" align-items="center">
                    <mu-button small @click="openAlertDialog(i.rectId,i.checkUserName)">延期处理</mu-button>
                    <mu-button small color="primary">任务指派</mu-button>
                  </mu-flex>
                </section>
              </mu-paper>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
      <!--延期处理-->
      <mu-container>
        <mu-dialog
          title="确定申请延期处理吗？"
          width="600"
          max-width="80%"
          :esc-press-close="false"
          :overlay-close="false"
          :open.sync="Delay"
        >
          <mu-form
            :model="form"
            class="mu-demo-form"
            :label-position="labelPosition"
            label-width="100"
          >
            <mu-form-item prop="input" label="备注">
              <mu-text-field v-model="form.input"></mu-text-field>
            </mu-form-item>
          </mu-form>
          <p>
            <span>审批人：</span>
            <span>{{checkUserName}}</span>
          </p>
          <mu-button slot="actions" flat @click="okAlertDialog()">确定</mu-button>
          <mu-button slot="actions" flat @click="closeAlertDialog">取消</mu-button>
        </mu-dialog>
      </mu-container>
    </section>
  </div>
</template>

<script>
import { CustomLabel, AvatarName } from "../../../components/widgets";
export default {
  name: "rectification_Work",
  components: {
    CustomLabel,
    AvatarName
  },
  data() {
    return {
      labelPosition: "top", //标签位置
      form: {
        input: ""
      },
      open: false,
      refreshing: false,
      loading: false,
      num: "",
      Delay: false,
      data: [],
      rectId: "",
      checkUserName: ""
    };
  },
  mounted() {},
  created() {
    this.fetch();
  },
  methods: {
    rout(value, checkUserName) {
      this.$router.push({
        path: "./inspect_Details",
        query: { info: value, name: checkUserName }
      });
    },
    //获取列表信息
    fetch() {
      let params = {
        // id: '159714885104566678',
      };
      this.$A.Go("get", "/safety/checkRect/pageList", params).then(
        success => {
          if (success.code == 200) {
            // console.log(success);
            this.num = success.body.page.rows;
            this.data = success.body.rows;
          } else {
            this.$A.MS("操作失败，请联系管理员！", "error");
          }
        },
        function(err) {}
      );
    },
    openAlertDialog(id, name) {
      // console.log(id,name);
      this.rectId = id;
      this.checkUserName = name;
      this.Delay = true;
    },
    closeAlertDialog() {
      this.Delay = false;
    },
    //确定延期处理
    okAlertDialog() {
      this.Delay = false;
      let params = {
        type: 0,
        taskId: this.rectId, //整改任务id
        approvalUser: "张三", //审批人
        applyDesc: JSON.stringify(this.form.input) //申请备注
      };
      this.$A.Go("post", "/safety/checkRect/closeProblem", params).then(
        success => {
          if (success.code == 200) {
            console.log(success);
            this.$A.MS("操作成功！", "success");
            this.fetch();
          } else {
            this.$A.MS("操作失败，请联系管理员！", "error");
          }
        },
        function(err) {}
      );
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 10;
      }, 2000);
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === "List" ? "Menu" : "List";
        this.num = 20;
      }, 2000);
    }
  }
};
</script>

<style scoped lang="scss">
.rectification {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
  }
  section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    img {
      width: 98%;
    }
  }

  .list-cell {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
